<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>歌留多</title>
		<style>
			*{
				padding:0;margin:0;list-style: none;text-decoration: none;
				color:white
			}
			a {color:white}
			
			html,body{width:100%;height: 100%;}
			
			.content {
				
				text-align: center;
				margin:0 auto 20px;
			}
			.henshin {
				font-size: 16px;color:deepskyblue;skybackground-color: white;
				width:140px;
				height:46px;line-height: 46px;
				border-radius: 8px;
				border:none;
				box-sizing: border-box;
				position:relative;
				transform: translate(-50%,-50%);
				left:50%;
				margin: 30px auto;
				outline: none;
				box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
				transition:0.3s;
			}
			.henshin:hover{
				height:56px;line-height: 56px;
				width:160px;
			}
			.main{
				width:100%;height:800px;
				background-image: linear-gradient(#e66465, #9198e5);
				padding-top: 100px;
				/* filter: blur(30px); */
			}
			
			
			
			
			@media screen and (min-width:770px) {
				.header {
					background: url(../image/44036.jfif) no-repeat;
					background-size: 100% 100%;
					width:100%;height:100%;
					
					box-sizing: border-box;
					padding-top: 180px;
				}
				.nav {
					width:100%;height:40px;padding:8px;
				}
				.nav ul .ii {display:none;}
				.nav ul {
					margin:0 auto 80px;
					width:770px;
					position:relative;z-index: 33;color:white;
					display:flex;justify-content: center;
					
				}
				.nav ul li {
					flex:1;height:30px;line-height: 30px;
					width:60px;box-sizing: border-box;
					margin:0 10px 10px 0;
					text-align: center;
				}
				.nav ul li:hover {
					background-color: white;
					border-radius: 12px;
				}
				.nav ul li a:hover {
					color:skyblue
				}
				.nav ul .current {
					border: 1px solid white;
					border-radius: 12px;
					background-color: white;
				}
					.nav ul .current a {
						color:deepskyblue;
					}			
				
			}
			
			
			@media screen and (max-width:770px) {
				.header {
					background: url(../image/44036.jfif) no-repeat;
					background-position:top left;
					background-size: 140% 140%;
					/* background-size: 100% 100%; */
					width:100%;height:100%;
					padding-top:180px;
					box-sizing: border-box;
				}
				/* .nav ul {display:flex;} */
				.ii {width:30px;height:30px;display: inline;position:relative;top:5px;
				
				}
				.content {
					width: 80%;
				}
				.nav {
					width:100%;background-color: deepskyblue;height:40px;margin-bottom: 80px;
					line-height: 40px;
				}
				.nav ul li {display:none;}
				.nav ul .current {
					display:inline;height:40px;margin:0 auto;width:100px;
				}
				.nav_active {
					position:relative;z-index: 99;
					width:100%;background-color: royalblue;height:200px;
					line-height: 40px;
					overflow: hidden;
				}
				
			}
			/* 
			此时的效果为点击标签会跳转也页面;
			在不使用框架,又不让地址发生跳转;并且页面部分内容发生改变,利用选项卡的操作 
			*/
		</style>
	</head>
	<body>
		<div class="header">
			<nav class="nav" style="transition:1s;position: fixed;top:0;">
			    <ul class="list"> 
					<img src="../image/nav.png" alt="dao" class="ii">
			        <li ><a href="../index.html">每日诗词</a></li>
			        <li class="current"><a href="javascript:;">百人一首</a></li>
			        <li><a href="./du.html">毒鸡汤</a></li>
			        <li><a href="javascript:;">每日一篇</a></li>
			        <!-- <li><a href="javascript:;">Graphic Desig</a></li> -->
			    </ul>
			</nav>
			<div class="content">
				<!-- <h2 style="margin-bottom: 20px;">Do Your Best</h2> -->
				<p class="poem" style="color:skyblue;margin-bottom:20px;text-indent:2em"></p>
					<p class="poem" style="color:skyblue;margin-bottom:20px;text-indent:2em"></p>
					<p class="poem" style="color:skyblue;text-indent:2em"></p> 
				
		</div>
		<button class="henshin">换一句</button>
	<script type="text/javascript">	
		let ii =document.getElementsByClassName('ii');
		// let xx =document.getElementsByClassName('list');
		let list =document.getElementsByTagName("li");
		let nav =document.getElementsByTagName('nav');
		let flag =false;
		
		ii[0].addEventListener('click',function(){
			if(flag) {
				for(let i=0;i<list.length;i++){
					if(list[i].className =="current") {
						list[i].style.display ="inline"
						continue;
					}
					list[i].style.display="none";
				}
				nav[0].className="nav";
				
				flag=false;
				return;
			}
			nav[0].className="nav_active";
			setTimeout(function(){
				for(let i=0;i<list.length;i++){
					// list[i].className="";
					list[i].style.display="block";
				}
			},100)
			flag =true;
		})
		var henshin =document.getElementsByClassName('henshin')
		var poem =document.getElementsByClassName('poem')
		var info =[
			{id:1,sentence:["从此我不再希求幸福，我自己便是幸福。凡是我遇见的我都喜欢，一切都被接受","一切对我都是可爱的。从这时候起我使我自己自由而不受限制","温和地，怀着不可抗拒的意志，从束缚着我的桎梏下解放我自己。"]},
			{id:2,sentence:["当我活着时，我要做生命的主宰，而不做它的奴隶。哪里有土，哪里有水，哪里就长着草。","不求苍天俯就我的美意，但求永远恣意挥洒。","因寒冷而打颤的人，最能体会到阳光的温暖。经历了人生烦恼的人，最懂得生命的可贵 "]},
			{id:3,sentence:["因寒冷而打颤的人，最能体会到阳光的温暖。经历了人生烦恼的人，最懂得生命的可贵","我的信念是把最好的留着别说。做一个世界的水手，游遍每一个港口。","要像树和动物一样，去面对黑暗，暴风雨，饥饿，愚弄，意外和挫折。"]},
			{id:4,sentence:["不连贯的神经质行为都与伟大的激情毫无共同之处;伟大的激情在人心深处静静地燃烧，吸光了人身上的全部光和热，使他外表看上去平静而冷漠","刚强，她是一个女人，永远只爱着战士。","我感到难过,不是因为你欺骗了我,而是因为我再也不能相信你了。"]},
			{id:5,sentence:["凡具有生命者，都不断的在超越自己。而人类，你们又做了什么?","我的内心像树是一样的，越是向往高处的阳光，它的根就越要伸向黑暗的地底。","当你凝视深渊时，深渊也在凝视着你。"]},
			{id:6,sentence:["我听见了谈话者的谈话，关于始与终的谈话，可是我不谈论始与终。","离去之后是再来，永远偿还这永远的债务， 丰沛的阵雨，接着便是更加丰厚的报酬。","一切对我都是可爱的。"]},
			{id:7,sentence:["风不能使我惆怅，雨不能使我忧伤","风和雨， 都不能使我的心变得不晴朗","我是一片叶 ——筋脉是森林。 如果能够大方， 何必显得猥琐， 如果能够潇洒, 何必选择寂寞"," 我是一条欢乐奔流的小河。 报我以崎岖吗? 我是一座大山庄严地思索! 报我以幸福吗?"]},
			{id:8,sentence:[" 曾经有过那么多的惆怅，想起往往令人断肠，我不知道我的追求在何方，问风问雨问大地， 却没有点回想。"," 只要春天还在 我就不会悲哀 纵使黑夜吞噬了一切，太阳还可以重新回来"," 只要生命还在， 我就不会悲哀"]},
			{id:9,sentence:[" 呼喊是爆发的沉默， 沉默是无声的召唤，不论激越，不是宁静"," 我祈求，只要不是平淡，如果远方呼喊我，我就走向远方"," 双手划烂，索性就让荆棘变成杜鹃，没有比脚更长的路, 没有比人更高的山"]},
			{id:11,sentence:[" 我们飞翔得越高，我们在那些不能飞翔的人眼中的形象越是渺小。"," 我祈求，只要不是平淡，如果远方呼喊我，我就走向远方"," 今天是一个孤独的怪人，你离群索居，总有一天你会成为一个民族!"]},
			{id:12,sentence:[" 我走在命运为我规定的路上， 虽然我并不愿意走在这条路上， 但是我除了满腔悲愤的走在这条路上 别无选择"," 白昼的光，如何能够了解夜晚黑暗的深度呢?"," 不要停在平原，不要登上高山，从半山上看，世界显得最美。"]},
		]
		function aj(result)	{
					let aa = result.sort(function(){
						let bb =Math.random()
						return bb- 0.5;
					})
					shi =aa[0];
					let detail =shi.sentence
					poem[0].innerText =detail[0];
					poem[1].innerText =detail[1];
					poem[2].innerText =detail[2];
		}			
		aj(info)
		henshin[0].onclick =function () {
		aj(info)
		}
		</script>
	</body>
</html>
